<script lang="ts" setup>
import { ref, provide } from 'vue'
import { storeToRefs } from 'pinia'

import useRouteCache from '@/hooks/useRouteCache'
import { useUserStore } from '@/stores'

type TabType = 'a' | 'b'

defineOptions({
  name: 'User',
  beforeRouteLeave(to) {
    const { addCache, removeCache } = useRouteCache()
    removeCache('User')
    const routes = ['/user/xxx/1', '/user/xxx/2']
    if (routes.includes(to.path)) addCache('OwnerSettleIn')
  },
})

const { update, reset } = useUserStore()
const { userInfo } = storeToRefs(useUserStore())

const tabs = [
  { type: 'a', label: 'A', component: A },
  { type: 'b', label: 'B', component: B },
]

const tab = ref<TabType>()
/**
 * 切换
 */
const handleChange = (value: TabType) => (tab.value = value) && setHTab(value)

/**
 * 返回
 */
const handleBack = () => history.back()

/**
 * 激活
 */
const isActive = (value: TabType) => tab.value === value

provide('userInfo', userInfo)
</script>

<template>
  <div class="page">
    <van-nav-bar
      left-arrow
      title="用户首页"
      :border="false"
      @click-left="() => handleBack()"
    >
      <div class="tabs">
        <div
          class="tabs__item"
          v-for="item in tabs"
          :class="{ 'tabs__item--active': isActive(item.type as TabType) }"
          @click="() => handleChange(item.type as TabType)"
        >
          {{ item.label }}
        </div>
      </div>
    </van-nav-bar>

    <template v-for="item in tabs">
      <div class="main" v-if="isActive(item.type as TabType)">
        <component :is="item.component" />
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped></style>
